<template>
    <div>
        <mt-field placeholder="短信验证码" type="number" v-model="inputValueCode" @input="clickEvent">
            <mt-button type="default" size="small" :disabled="sendMsgDisabled" @click.native="send">
                <span v-if="isShow" class="reSendBtn">{{time+'秒后重发'}}</span>
                <span v-if="!isShow" class="sendBtn">发送验证码</span>
            </mt-button>
        </mt-field>
    </div>
</template>

<script>
import { Toast } from 'mint-ui';
import { GetVerificationCode } from '@/api/login'
import { validatePhone } from '@/utils/validate'
export default {
    data: function () {
        return {
            inputValueCode:'',
            time: 60, // 发送验证码倒计时
            sendMsgDisabled: true,
            isShow:false,
        }
    },
    props:{
        mobile:{
            type:String,
        }
    },
    mounted(){
        if( this.$route.name == 'inputpwd' || this.$route.name == 'findPayPwd' ){
            //提现输入验证码时 && 修改支付密码时  不用填手机号 可直接点击发送验证码
            this.sendMsgDisabled = false;
        }
    },
    methods: {
        clickEvent(){
            this.$emit('sendValueToParent',this.inputValueCode);
        },
        send(){
            GetVerificationCode({
                mobile: this.mobile
            }).then(res => {
                if( res.code == 200 ){
                    this.isShow = true;
                    let interval = window.setInterval(() => {
                        if ((this.time--) <= 0) {
                            this.time = 60;
                            this.isShow = false;
                            window.clearInterval(interval);
                        }
                    }, 1000);
                }else{
                    Toast({
                        message: res.msg,
                        iconClass: 'icon iconfont icon-dingdanzhuangtaishibai'
                    })
                }
                this.sendMsgDisabled = false;
            })
        }
    },
    watch:{
        mobile(val){
            if( validatePhone(val) ){
                this.sendMsgDisabled = false;
            }else{
                this.sendMsgDisabled = true;
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
// 输入框---60S倒计时
.mint-field{
    .mint-cell-wrapper{
        border-bottom: 1px solid #e3e3e3;
        .mint-cell-value{
            input{
                color: #050505;
                font-size:34px;
            }
            .mint-field-other{
                .mint-button--small{
                    color:#004EA2;
                    font-size:14px;
                    background:transparent;
                    box-shadow:0 0 1px transparent;
                    &::after{
                        background-color:transparent;
                    }
                    &.is-disabled{ 
                        color: #BFBFBF;
                    }
                }
                
            }
        }
    }
}
.reSendBtn{
    color:#5F88FF;
    opacity:0.4;
}
.sendBtn{
    color:#5F88FF;
}
</style>